<template>
	<view>
		<!-- <tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag='true' :isEqually='true'
		 @clickItem="onClickItem"></tabControl> -->
		<view class="sqkp-wrap">
			<view class="sqkp-wrap_geren">
				<!-- <view class="sqkp-fplx" v-if="current == 0">
					<xfl-select ref="xfl" :list="list" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false"
					 :style_Container="'height: 45px; font-size: 16px; color:#333;'" :placeholder="'发票类型'" :initValue="'发票类型'"
					 :selectHideType="'hideAll'" @change="selectChange">
					</xfl-select>
				</view> -->
				<!-- 	<view class="sqkp-fplx">
					<xfl-select ref="xfl" :list="list2" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false"
					 :style_Container="'height: 45px; font-size: 16px; color:#333;'" :placeholder="'发票类型'" :initValue="'发票类型'"
					 :selectHideType="'hideAll'" @change="selectChange">
					</xfl-select>
				</view> -->
				<view class="sqlp-kpxx">
					<view class="kpxx-section">开票信息</view>
					<view class="kpxx-wrap">
						<view class="kpxx-list">
							<view class="kpxx-list_title"><text class="zhanwei"></text>发票金额</view>
							<view class="kpxx-list_input">
								<input type="text" placeholder="" v-model="fapiaojine" class="kpxx-input" disabled="true" />
							</view>
						</view>
						<view class="kpxx-list">
							<view class="kpxx-list_title"><text class="zhanwei">*</text>发票抬头</view>
							<!-- <view class="kpxx-list_input" v-if="current == 0">个人</view> -->
							<view class="kpxx-list_input" @click="goToPage(true,'nav','/pages/user/fapiaoguanli/choosekaipiao?isapply=1&kpid='+kaipiaoid+'&dzid='+dizhiid+'&orderids='+orderids+'&fapiaojine='+fapiaojine+'&fapiaoid='+fapiaoid)">
								<text style="font-size: 30rpx;color: #000;">{{taitou}}</text>
								<image src="/static/img/right.jpg" class="right-icon"></image>
							</view>
						</view>
						<view class="kpxx-list">
							<view class="kpxx-list_title"><text class="zhanwei">*</text>税号</view>
							<view class="kpxx-list_input">
								<input type="text" placeholder="税号" v-model="shuihao" class="kpxx-input" disabled="true" />
							</view>
						</view>
						<view class="kpxx-list">
							<view class="kpxx-list_title"><text class="zhanwei">*</text>发票类型</view>
							<view class="kpxx-list_input">
								<input type="text" placeholder="发票类型" v-model="fapiaotype" class="kpxx-input" disabled="true" />
							</view>
						</view>
						<view class="kpxx-list" :style="iszhuanpiao==1?'display:none':''">
							<view class="kpxx-list_title"><text class="zhanwei"></text>电子邮箱</view>
							<view class="kpxx-list_input">
								<input type="text" placeholder="电子邮箱" v-model="email" class="kpxx-input" disabled="true" />
							</view>
						</view>
						<view class="kpxx-list">
							<view class="kpxx-list_title"><text class="zhanwei">{{iszhuanpiao==1?'*':''}}</text>注册地址</view>
							<view class="kpxx-list_input"><input type="text" v-model="dizhi" placeholder="地址" class="kpxx-input" disabled="true" /></view>
						</view>
						<view class="kpxx-list">
							<view class="kpxx-list_title"><text class="zhanwei">{{iszhuanpiao==1?'*':''}}</text>注册电话</view>
							<view class="kpxx-list_input"><input type="text" v-model="phone" placeholder="电话" class="kpxx-input" disabled="true" /></view>
						</view>
						<view class="kpxx-list">
							<view class="kpxx-list_title"><text class="zhanwei">{{iszhuanpiao==1?'*':''}}</text>开户银行</view>
							<view class="kpxx-list_input"><input type="text" v-model="kaihuhang" placeholder="开户行" class="kpxx-input"
								 disabled="true" /></view>
						</view>
						<view class="kpxx-list">
							<view class="kpxx-list_title"><text class="zhanwei">{{iszhuanpiao==1?'*':''}}</text>开户行账号</view>
							<view class="kpxx-list_input"><input type="text" v-model="zhanghao" placeholder="开户行账号" class="kpxx-input"
								 disabled="true" /></view>
						</view>
						<view class="kpxx-list" :style="iszhuanpiao==1?'':'display:none'">
							<view class="kpxx-list_title"><text class="zhanwei">*</text>收件人</view>
							<view class="kpxx-list_input" @click="goToPage(true,'nav','/pages/user/fapiaoguanli/choosedizhi?isapply=1&kpid='+kaipiaoid+'&dzid='+dizhiid+'&orderids='+orderids+'&fapiaojine='+fapiaojine+'&fapiaoid='+fapiaoid)">
								<text style="font-size: 30rpx;color: #000;">{{shoujianren}}</text>
								<image src="/static/img/right.jpg" class="right-icon"></image>
							</view>
						</view>
						<view class="kpxx-list" :style="iszhuanpiao==1?'':'display:none'">
							<view class="kpxx-list_title"><text class="zhanwei">*</text>联系电话</view>
							<view class="kpxx-list_input"><input type="text" v-model="lianxidianhua" placeholder="联系电话" disabled="true"
								 class="kpxx-input" /></view>
						</view>
						<view class="kpxx-list" :style="iszhuanpiao==1?'':'display:none'">
							<view class="kpxx-list_title"><text class="zhanwei">*</text>收件地址</view>
							<view class="kpxx-list_input" style="color: #333; font-size: 30rpx;">
								{{shoujiandizhi}}
								<!-- <input type="text"  placeholder="收件地址" disabled="true" class="kpxx-input" />-->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="queren-btn" @click="submit()">
			确认并提交
		</view>
		<!-- 弹窗提示 -->
		<uni-popup ref="showpopup" :type="type" :maskClick="false">
			<view class="submitPopup">
				<view class="submit-title">提示</view>
				<view class="submit-text">{{iszhuanpiao==1?'发票申请成功':'发票将发送至您的邮箱，请注意查收！'}}</view>
				<view class="sumbit-btn">
					<view class="btn1" @click="backuser()">返回个人中心</view>
					<view class="btn2" @click="backindex()">返回首页</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import tabControl from '@/components/tabControl-tag/tabControl-fapiao.vue';
	import xflSelect from '@/components/xfl-select/xfl-select.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import commonjs from '@/common/script/common.js';
	let fapiaoid = 0;
	let orderids = "";
	let fapiaojine = 0;
	let isedit = 0;
	export default {
		components: {
			tabControl,
			xflSelect,
			uniPopup
		},
		data() {
			return {
				type: 'popup',
				isqiye: 0,
				current: 0,
				taitou: '',
				shuihao: '',
				email: '',
				dizhi: '',
				phone: '',
				kaihuhang: '',
				zhanghao: '',
				shoujianren: '',
				shoujiandizhi: '',
				lianxidianhua: '',
				orderids: '',
				fapiaojine: 0,
				fapiaotype: '',
				items: ['个人', '企业'],
				list: [ //要展示的数据
					{
						value: '普通电子发票(电子版)',
						text: '普通发票'
					},
					{
						value: '收据(电子版)',
						text: '收据'
					},
				],
				list2: [{
						value: '普通电子发票(电子版)',
						text: '普通发票'
					},
					{
						value: '收据(电子版)',
						text: '收据'
					},
				],
				iszhuanpiao: 0,
				iserror: false,
				kaipiaoid: 0,
				dizhiid: 0,
				fapiaoid: 0,
				haskaipiao: true
			}
		},
		onLoad(options) {
			this.checkLogin(1);
			this.checkkaipiao();
			if (options.fapiaoid != undefined && options.fapiaoid != null && options.fapiaoid != '' && options.fapiaoid > 0) {
				fapiaoid = options.fapiaoid;
				this.fapiaoid = options.fapiaoid;
				console.log(this.fapiaoid)
				console.log(options.isedit)
				if (options.isedit == 1)
					this.dobind();
			}
			if (options.orderids != undefined && options.orderids != null && options.orderids != '') {
				this.orderids = options.orderids;
				orderids = options.orderids;
			}
			if (options.jine != undefined && options.jine != null && options.jine != '') {
				this.fapiaojine = options.jine;
				fapiaojine = options.jine;
				if (this.fapiaojine > 1000) {
					this.list2 = [{
							value: '普通电子发票(电子版)',
							text: '普通发票'
						},
						{
							value: '增值税专用发票',
							text: '增值税专用发票'
						},
						{
							value: '收据(电子版)',
							text: '收据'
						},
					]
				}
			}
			if (options.kaipiaoid != undefined && options.kaipiaoid != null && options.kaipiaoid != '' && options.kaipiaoid > 0) {
				this.kaipiaoid = options.kaipiaoid;
				this.bindkaipiao();
			}
			if (options.dizhiid != undefined && options.dizhiid != null && options.dizhiid != '' && options.dizhiid > 0) {
				this.dizhiid = options.dizhiid;
				this.binddizhi();
			}

		},
		onShow() {
			this.checkLogin(1);
			// if (this.currUser.islogin && fapiaoid > 0)
			// 	this.bind();
			// let pages = getCurrentPages();
			// let currPage = pages[pages.length - 1];
			// console.log(currPage.kaipiaoid)
			// if (currPage.kaipiaoid != undefined && currPage.kaipiaoid != '' && currPage.kaipiaoid != null && currPage.kaipiaoid >
			// 	0) {
			// 	this.kaipiaoid = currPage.kaipiaoid;
			// 	this.bindkaipiao();
			// }
			// if (currPage.dizhiid != undefined && currPage.dizhiid != null && currPage.dizhiid != '' && currPage.dizhiid > 0) {
			// 	this.dizhiid = currPage.dizhiid;
			// 	this.binddizhi();
			// }
			// if (currPage.yewudesc != undefined && currPage.yewudesc != null)
			// 	this.yewudesc = decodeURIComponent(currPage.yewudesc);
		},
		methods: {
			backuser() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			backindex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			onClickItem(val) {
				this.current = val.currentIndex;
				this.isqiye = this.current;
				this.$refs.xfl.onClear();
				this.fapiaotype = "";
			},
			togglePopup(type, open) {
				this.type = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			cancel(type) {
				this.$refs['show' + type].close();
				this.goToPage(true, 'nav', '/pages/user/goumaijilu/goumaijilu')
			},
			submit() {
				//验证数据
				if (this.fapiaotype == '') {
					uni.showToast({
						title: '请选择发票类型！',
						icon: "none"
					});
					return;
				}
				let appid = "";
				// #ifdef APP-PLUS
				appid = plus.runtime.appid;
				// #endif
				let data = this.initNewData();
				data.location = 5211;
				data.appid = appid;
				data.orderids = this.orderids;
				// data.taitou = this.taitou;
				// data.shuihao = this.shuihao;
				// data.email = this.email;
				// data.dizhi = this.dizhi;
				// data.phone = this.phone;
				// data.kaihuhang = this.kaihuhang;
				// data.zhanghao = this.zhanghao;
				data.fapiaojine = this.fapiaojine;
				//data.fapiaotype = this.fapiaotype;
				data.isqiye = this.isqiye;
				data.iszhuanpiao = this.iszhuanpiao;
				// data.shoujianren = this.shoujianren;
				// data.shoujiandizhi = this.shoujiandizhi;
				// data.lianxidianhua = this.lianxidianhua;
				data.kaipiaoid = this.kaipiaoid;
				data.dizhiid = this.dizhiid;
				data.fapiaoid = this.fapiaoid;
				if (this.iszhuanpiao == 1 && this.fapiaojine < 1000) {
					uni.showToast({
						title: '发票金额小于1000元，我们将为开具普通发票，请您更换开票信息！',
						icon: "none"
					});
					return false;
				}
				console.log(data);
				uni.request({
					url: this.baseConfig.serverURL + 'user/fapiao/FapiaoApplyNewHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (result) => {
						if (result.statusCode == 200) {
							if (!result.data.ret) {
								uni.showToast({
									title: result.data.msg,
									icon: "none"
								});
							} else {
								//this.togglePopup('center', 'popup')
								this.type = 'center';
								this.$refs['showpopup'].open()
							}
						} else {
							uni.showToast({
								title: '提交失败,请重试！',
								icon: "none"
							});
						}
					},
					fail: (e) => {
						uni.showToast({
							title: '提交失败,请重试！',
							icon: "none"
						});
					}
				})
			},
			async dobind() {
				await this.bind();
			},
			bind() {
				let data = this.initNewData();
				data.location = 5211;
				data.id = fapiaoid;
				return new Promise((resolve, reject) => {
					uni.request({
						url: this.baseConfig.serverURL + 'User/fapiao/FapiaoBindHandler.ashx', //检查更新的服务器地址
						data: data,
						method: "POST",
						header: {
							"content-type": "application/x-www-form-urlencoded" //"application/json"
						},
						success: (result) => {
							if (result.statusCode == 200) {
								if (result.data.ret) {
									console.log(result.data.other2.kaipiaoid)
									this.kaipiaoid = result.data.other2.kaipiaoid;
									this.dizhiid = result.data.other2.dizhiid;
									this.fapiaojine = result.data.other2.jine;
									if (this.kaipiaoid > 0)
										this.bindkaipiao();
									if (this.dizhiid > 0)
										this.binddizhi();
								} else {
									uni.showToast({
										title: result.data.msg,
										icon: "none"
									});
								}
							} else {
								uni.showToast({
									title: "发票信息获取失败，请重试",
									icon: "none"
								});
							}
						},
						fail: (e) => {
							console.log(JSON.stringify(e))
							uni.showToast({
								title: "发票信息获取失败，可能网络超时",
								icon: "none"
							});
						}
					})
				})
			},
			bindkaipiao() {
				let data = this.initNewData();
				data.location = 5211;
				data.id = this.kaipiaoid;
				uni.request({
					url: this.baseConfig.serverURL + 'user/fapiao/KaipiaoBindHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (result) => {
						if (result.statusCode == 200) {
							if (result.data.ret) {
								this.taitou = result.data.other2.taitou;
								this.shuihao = result.data.other2.shuihao;
								this.email = result.data.other2.email;
								this.dizhi = result.data.other2.dizhi;
								this.phone = result.data.other2.phone;
								this.kaihuhang = result.data.other2.kaihuhang;
								this.zhanghao = result.data.other2.zhanghao;
								this.fapiaotype = result.data.other2.fapiaotype;
								this.iszhuanpiao = result.data.other2.iszhuanpiao;
							} else {
								uni.showToast({
									title: result.data.msg,
									icon: "none"
								});
							}
						} else {
							uni.showToast({
								title: "开票信息获取失败",
								icon: "none"
							});
						}
					},
					fail: (e) => {
						uni.showToast({
							title: "开票信息获取失败，可能网络超时",
							icon: "none"
						});
					}
				})
			},
			binddizhi() {
				let data = this.initNewData();
				data.location = 5211;
				data.id = this.dizhiid;
				uni.request({
					url: this.baseConfig.serverURL + 'user/fapiao/DizhiBindHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (result) => {
						if (result.statusCode == 200) {
							if (result.data.ret) {
								this.shoujianren = result.data.other2.lianxiren;
								this.shoujiandizhi = result.data.other2.dizhi;
								this.lianxidianhua = result.data.other2.phone;
							} else {
								uni.showToast({
									title: result.data.msg,
									icon: "none"
								});
							}
						} else {
							uni.showToast({
								title: "地址信息获取失败",
								icon: "none"
							});
						}
					},
					fail: (e) => {
						uni.showToast({
							title: "地址信息获取失败，可能网络超时",
							icon: "none"
						});
					}
				})
			},
			selectChange(e) {
				this.fapiaotype = e.orignItem.text;
				if (this.fapiaotype == '增值税专用发票') {
					this.iszhuanpiao = 1;
				} else {
					this.iszhuanpiao = 0;
				}
			},
			goToPage(checked, type, url) {
				commonjs.goToPage(checked, type, url)
			},
			checkkaipiao() {
				let data = this.initNewData();
				data.location = 5211;
				uni.request({
					url: this.baseConfig.serverURL + 'user/fapiao/CheckKaipiaoHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (result) => {
						if (result.statusCode == 200) {
							if (!result.data.ret) {
								this.haskaipiao = false;
							}
							if (!this.haskaipiao) {
								var that = this;
								uni.showModal({
									title: '温馨提示',
									content: "请您先填写开票信息。",
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											that.goToPage(true, 'nav', '/pages/user/fapiaoguanli/fapiao?isaddorupdate=1&isfirst=1&kpid=' + this.kaipiaoid +
												'&dzid=' + this.dizhiid + '&orderids=' + orderids + '&fapiaojine=' + fapiaojine + '&fapiaoid=' +
												fapiaoid)
										} else if (res.cancel) {
											//console.log('用户点击取消');
										}
									}
								})
							}
							console.log(this.haskaipiao);
						}
					},
					fail: (e) => {
						// uni.showToast({
						// 	title: "",
						// 	icon: "none"
						// });
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
		height: 100%;
	}

	.sqkp-wrap_geren {
		margin: 30rpx;

		.sqlp-kpxx {
			.kpxx-section {
				font-size: 34rpx;
				padding: 20rpx 0;
			}

			.kpxx-wrap {
				background-color: #fff;
				border-radius: 10rpx;

				.kpxx-list {
					padding: 20rpx 0;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #f5f5f5;

					.kpxx-list_title {
						font-size: 32rpx;

						.zhanwei {
							width: 30px;
							color: rgb(255, 0, 0);
							display: inline-block;
							text-align: center;
							font-weight: 700;
							font-size: 30rpx;
							vertical-align: middle;
						}
					}

					.kpxx-list_input {
						margin: 0 30rpx;
						font-size: 26rpx;
						color: #aaaaaa;
						display: flex;
						flex: 1;
						justify-content: flex-end;

						.kpxx-input {
							font-size: 30rpx;
							color: #000;
							text-align: right;
						}

						.right-icon {
							width: 30rpx;
							height: 30rpx;
							margin-top: 6rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}

	.queren-btn {
		margin: 20rpx 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #0099ff;
		padding: 20rpx 0;
		color: #fff;
		border-radius: 10rpx;
		font-size: 30rpx;
	}

	.submitPopup {
		width: 80%;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 10%;

		.submit-title {
			font-size: 32rpx;
			padding: 20rpx 0;
		}

		.submit-text {
			font-size: 28rpx;
			padding-bottom: 20rpx;
		}

		.sumbit-btn {
			border-top: 1px solid #e0e0e0;
			width: 100%;
			text-align: center;
			padding: 20rpx 0;
			color: #2d96fd;
			font-size: 32rpx;
		}
	}

	.sumbit-btn {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.btn1 {
			height: 70rpx;
			line-height: 70rpx;
			font-size: 30rpx;
			background-color: #fff;
			border: 1px solid #2684ff;
			color: #2684ff;
			width: 40%;
			margin: 0 30rpx;
			border-radius: 10rpx;
		}

		.btn2 {
			height: 70rpx;
			line-height: 70rpx;
			font-size: 30rpx;
			background-color: #2684ff;
			border: 1px solid #2684ff;
			color: #FFFFFF;
			width: 30%;
			margin: 0 30rpx;
			border-radius: 10rpx;
		}
	}
</style>
